<template>
  <el-dialog class="public-dialog" title="批量手动标发订单" width="1200" :modelValue="modelValue" @close="handleClose" draggable align-center :close-on-click-modal="false">
    <div>
      <vxe-table ref="tableRef" :data="currentRow" :round="true" maxHeight="500">
        <!-- <vxe-column type="radio" width="40"></vxe-column> -->
        <vxe-column field="shop" title="来源店铺" min-width="100" />
        <vxe-column field="order_sn" title="系统单号" min-width="140" />
        <vxe-column field="site" title="国家" min-width="60">
          <template #default="{ row }">
            {{ row?.recipient?.recipient_country }}
          </template>
        </vxe-column>
        <vxe-column field="ship_warehouse" title="发货仓库" min-width="100">
          <template #default="{ row }">
            {{ row?.logistics?.ship_warehouse_name }}
          </template>
        </vxe-column>
        <vxe-column field="shipping_method_id" title="运输方式" min-width="100">
          <template #default="{ row }">
            {{ row?.logistics?.transport_name }}
          </template>
        </vxe-column>
        <vxe-column field="a4" title="标记发货方式" width="200">
          <template #header>
            标记发货方式
            <el-popover :visible="visible" placement="top" :width="220">
              <div>
                <VXSelect dictionary="mark_shipment_type" placeholder="新建订单原因" v-model="modelAllSel" clearable class="w-[100%]" />
              </div>
              <div class="text-center mt-[8px]">
                <el-button size="small" text @click="visible = false"> 取消 </el-button>
                <el-button size="small" type="primary" @click="handleBatchSelect"> 保存 </el-button>
              </div>
              <template #reference>
                <div class="text-[#3366F1] font-[400] cursor-pointer" @click="visible = !visible">批量</div>
              </template>
            </el-popover>
          </template>
          <template #default="{ row }">
            <VXSelect dictionary="mark_shipment_type" placeholder="请选择" v-model="row.marking_method_id" />
          </template>
        </vxe-column>

        <vxe-column field="platform_shipping_method" title="平台标发运输方式" minWidth="160" />
        <vxe-column field="tracking_number" title="标发追踪号" min-width="100">
          <template #default="{ row }">
            {{ row?.logistics?.tracking_number }}
          </template>
        </vxe-column>
        <vxe-column field="mark_shipment_status_desc" title="标记状态" min-width="100"> </vxe-column>
      </vxe-table>
    </div>
    <template #footer>
      <!-- <span class="flex justify-center py-[10px]"> -->
      <el-button :disabled="loading" @click="handleClose(false)"> 取消 </el-button>
      <el-button type="primary" :loading="loading" @click="handleSave"> 确认标发 </el-button>
      <!-- </span> -->
    </template>
  </el-dialog>
</template>

<script setup lang="jsx">
import { ElMessage } from "element-plus"
import _ from "lodash"
const props = defineProps({
  modelValue: { type: Boolean, default: false },
  rows: { type: Array, default: () => [] },
})

const currentRow = ref([])
const modelAllSel = ref("")

watch(
  () => props.rows,
  (value) => {
    if (value) currentRow.value = value
    // console.log(currentRow.value );
  },
  { deep: true }
)

const emit = defineEmits(["update:modelValue", "refresh", "submit"])

const visible = ref(false)
const loading = ref(false)
const tableRef = ref()
// const tableData = [{ a4: 1 }, { a4: 3 }, { a4: '2' }]

const handleSave = async () => {
  try {
    loading.value = true
    let dd = _.cloneDeep(currentRow.value)
    const first = tableRef?.value.getRadioRecord() || dd[0]
    const { id: firstId } = first
    dd.splice(
      dd.findIndex((v) => v.id === firstId),
      1
    )
    dd.unshift(first)
    const orders = []
    let itemIndex = 0
    for (const item of currentRow.value) {
      if (!item.marking_method_id) {
        ElMessage.warning(`第${itemIndex + 1}行的新建订单原因不能为空！`)
        return
      }
      orders.push({
        order_id: item.id,
        marking_method_id: item.marking_method_id,
      })
      itemIndex++
    }
    const dtd = currentRow.value.map((v) => ({
      order_id: v.id,
      marking_method_id: v.marking_method_id,
    }))

    emit("submit", {
      input: {
        data: dtd,
      },
    })
  } catch (e) {
    console.error(e)
  } finally {
    loading.value = false
  }
}

const handleBatchSelect = (va) => {
  visible.value = false
  const curVal = modelAllSel.value
  const data = currentRow.value
  data.forEach((item, index) => {
    data[index].marking_method_id = curVal
  })
}

const handleClose = (refresh) => {
  emit("update:modelValue", false)
  if (refresh) emit("refresh")
}
</script>
